<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#app {margin: 50px auto;width: 600px;}
			fieldset{border: 1px solid purple; margin-bottom:20px;}
			fieldset input{width: 200px;height: 30px; margin: 10px 0;}
			table{width: 600px;border: 2px solid purple; text-align: center;}
			thead{background-color: purple;color: #fff;}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 上部分 -->
			<fieldset id="">
				<legend>信息录入系统VUE3.0版</legend>
				<div>
					<label>姓名：<input type="text" v-model.trim="newPerson.name" placeholder="请输入姓名" /></label>
				</div>
				<div>
					<label>年龄：<input type="text" v-model.trim="newPerson.age" placeholder="请输入年龄" /></label>
				</div>
				<div>
					<label>
						性别：
						<select v-model="newPerson.sex">
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</label>
				</div>
				<div>
					<label>手机：<input type="text" v-model.trim="newPerson.phone" placeholder="请输入手机" /></label>
				</div>
				<button @click="addNewP">创建新用户</button>
			</fieldset>
			<!-- 下部分 -->
			<table>
				<thead>
					<tr>
						<td>姓名</td>
						<td>性别</td>
						<td>年龄</td>
						<td>电话</td>
						<td>删除</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(p,index) in persons" >
						<td>{{p.name}}</td>
						<td>{{p.sex}}</td>
						<td>{{p.age}}</td>
						<td>{{p.phone}}</td>
						<td>
							<button @click="delP">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="vue.js" ></script>
		<script>
			const app = Vue.createApp({
		    data(){
		 	 return{
				   persons:[
					   {name:'张三',age:20,sex:'男',phone:'18913223594'},
					   {name:'李四',age:30,sex:'女',phone:'13114233546'},
					   {name:'王五',age:40,sex:'男',phone:'18113452379'},
					   {name:'赵六',age:10,sex:'女',phone:'18967337826'}
				   ],
				   newPerson:{name:'',age:'', sex:'男',phone:''}
				 }
				},
			methods:{
				delP(index){
					this.persons.splice(index,1);
				},
				addNewP(){
					const {name,age,sex,phone} = this.newPerson;
					// console.log(name,age,sex,phone);
					//1.判断
					if(!name||!age||!sex||!phone){
						alert('内容不完整');
						return;
					}
					//2.添加一条数据
					this.persons.unshift(this.newPerson);
					//3.清空数据
					this.newPerson = {name:'',age:'', sex:'男',phone:''}
					
				}
			}
			}).mount('#app');
		</script>
	</body>
</html>
